﻿<template>
  <el-dialog v-drag :title = 'dialogTitle' :visible.sync = 'dialogFormVisible' width = '40%' class = 'main_dialog'
  :before-close = "closeDialog" append-to-body>
    <el-form :model = "ruleForm" ref = "ruleForm" :label-width = 'labelWidth' :rules = 'rules'>
      <el-form-item label = "登录账号：">
        <el-input v-model = 'userName' disabled></el-input>
      </el-form-item>
      <el-form-item label = '旧密码：' prop = 'oldPwd' >
        <el-input v-model = 'ruleForm.oldPwd' show-password placeholder = "请输入旧密码"></el-input>
      </el-form-item>
      <el-form-item label = '新密码：' prop = 'newPwd' >
        <el-input v-model = 'ruleForm.newPwd' show-password placeholder = "请输入密码"></el-input>
      </el-form-item>
      <el-form-item label = '确认密码：' prop = 'checkPwd' >
        <el-input v-model = 'ruleForm.checkPwd' show-password placeholder = "请确认密码"></el-input>
      </el-form-item>
      <el-form-item class = 'form_noLeftMargin'>
        <el-button type = 'info' @click = "resetForm ('ruleForm')">取 消</el-button>
        <el-button type = "primary" @click = "submitForm ('ruleForm')">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  props: ['dialogFormVisible'],
  data () {
    var validatePwd = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPwd !== '') {
          this.$refs.ruleForm.validateField('checkPwd')
        }
        callback()
      }
    }
    var validateCheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.newPwd) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      dialogTitle: '修改密码',
      labelWidth: '90px',
      ruleForm: {
        oldPwd: '',
        newPwd: '',
        checkPwd: ''
      },
      rules: {
        oldPwd: [
          { required: true, message: '旧密码不能为空', trigger: 'blur' }
        ],
        newPwd: [
          { validator: validatePwd, trigger: 'blur' }
        ],
        checkPwd: [
          { validator: validateCheck, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    userName: function () {
      return this.$store.state.userName
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$patch('/login/' + this.$store.state.userUid + '/changepassword', {
            oldpw: this.ruleForm.oldPwd,
            newpw: this.ruleForm.newPwd
          }).then((data) => {
            if (data.data.result.code === 'success') {
              this.$message({
                message: '修改密码成功',
                type: 'success'
              })
              this.$refs[formName].resetFields()
              this.$emit('sureChange')
            } else {
              this.$message.error(data.data.result.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.$emit('giveUpChange')
    },
    closeDialog () {
      this.$refs.ruleForm.clearValidate()
      this.ruleForm.oldPwd = ''
      this.ruleForm.newPwd = ''
      this.ruleForm.checkPwd = ''
      this.$emit('giveUpChange')
    }
  }
}
</script>
